<template>
    <view class="index">
        <view class="custom" :style="'top:' + customTop + 'px'">
            <image :src="logo" style="width: 200rpx;height: 60rpx;"></image>
        </view>
        <view class="main">
            <view class="header p_20 m_b_20" :style="'padding-top:' + titleHeight + 'px'">
                <view class="m_t_20" style="color:#9C8D8C;">欢迎登录</view>
                <view class="m_t_20 dis_f_sb_c">
                    <view class="f_w_b">困境儿童蜕变帮扶计划小程序</view>
                    <view v-if="isToken" class="f_s_14" @click="handleToLogin"> 注册志愿者 > </view>
                </view>
            </view>
            <view>
                <u-swiper :list="banner" indicator :height="bannerHeight"  imgMode="heightFix" @click="handleToSwiperInfo" radius="0" indicatorActiveColor="#EF483F" indicatorInactiveColor="#F9CEC1"></u-swiper>
            </view>
        </view>
        <view class="content p_20">
            <view>{{indexTitle}}</view>
            <view v-if="list.length>0">
                <view v-for="(item,index) in list" :key="index" @click="handleToInfo(item)">
                    <view class="card_box p_10 m_t_10">
                        <view class="dis_f_sb">
                            <view style="flex:1;width: calc(100% - 200rpx);">
                                <view class="over1 f_w_b">{{item.configName}}</view>
                                <view class="over2 m_t_10 f_s_14" style="color: #898C92;" v-html="item.remark"></view>
                            </view>
                            <image  :src="item.url.split(',')[0]" style="width: 200rpx;height: 200rpx;"></image>
                        </view>
                    </view>
                </view>
            </view>
            <s-empty v-else/>
        </view>
        <view class="wrap">
            <u-back-top :scroll-top="scrollTop"></u-back-top>
        </view>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {getByKeyApi, getOrphanListApi} from "@/sheep/api/index";
export default {
    data() {
        return {
            indexTitle:'',
            list: [],
            banner: [],
            bannerHeight: 160,
            pickerTypeList:[],
            titleHeight: 0,
            customTop: 0,
            scrollTop: 0,
            windowHeight: uni.getSystemInfoSync().windowHeight,
            logo:'',
            isToken:false,
        };
    },
    async onLoad(options) {
        this.getindexTitle();
        this.getHeight();
        this.getBannerList();
        this.getBannerHeight();
        this.getLogo();
        this.getassistanceCase();
        this.isToken = uni.getStorageSync('token') ? false : true;
    },
    onReady() {},
    onShow(options) {

    },
    methods: {
        handleToSwiperInfo(e){
            console.log(e);
            uni.navigateTo({
                url: '/pages/index/swiperInfo?businessConfigId=' + this.banner[e].businessConfigId
            })
        },
        handleToLogin(){
            uni.reLaunch({
                url: '/pages/login/index'
            })
        },
        async getBannerList() {
            let res = await getByKeyApi("swiper");
            this.banner = res.data;
        },
        async getBannerHeight() {
            let res = await getByKeyApi("swiper_height");
            this.bannerHeight = res.data[0]?.configValue;
        },
        async getindexTitle() {
            let res = await getByKeyApi("index_title");
            this.indexTitle = res.data[0]?.configValue;
        },
        async getLogo() {
            let res = await getByKeyApi("logo");
            this.logo = res.data[0]?.url;
        },
        async getassistanceCase() {
            let res = await getByKeyApi("assistanceCase");
            this.list = res.data;
        },
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + res.height + 16;
            this.customTop = res.top + 3;
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        handleToInfo(item){
            uni.navigateTo({
                url: '/pages/index/indexInfo?businessConfigId=' + item.businessConfigId
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.content{
    background-color: #F8F8FA;
    min-height: 60vh;
}
.index {
    .custom {
        position: absolute;
        left: 30rpx;
        font-size: 40rpx;
        font-weight: bolder;
    }
    .main {
        //padding: 0 30rpx;
        .header {
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 300px;
                background-color: #FCE4E0;
                z-index: -2;
            }
        }
        .view {
            position: relative;
            .view-son {
                position: absolute;
                bottom: -5%;
                z-index: -1;
            }
        }
        .grid-text {
            font-size: 12px;
            color: #333;
            padding: 10rpx 0 20rpx 0rpx;
            box-sizing: border-box;
        }
        .goods-box {
            background: #af5858;
            height: 25px;
            border-radius: 4px;
        }
    }
}
</style>
